<template>
  <div>
    <div class="register"
         v-show="msg==1">
      <div class="phone">
        <p class="num">手机号</p>
        <input type="text"
               placeholder="请输入手机号">
      </div>
      <div class="phone">
        <p class="num">验证码</p>
        <input type="text"
               placeholder="请输入验证码">
        <span class="get">获取验证码</span>
      </div>
      <button>手机登录/注册</button>
      <p class="change"
         @click="change()">账号密码登录</p>
    </div>

    <div class="register"
         v-show="msg==2">
      <div class="phone">
        <p class="num">手机号/邮箱</p>
        <input type="text"
               placeholder="请输入手机号或邮箱">
      </div>
      <div class="phone">
        <p class="num">密码</p>
        <input type="text"
               placeholder="请输入密码">
        <span class="get">忘记密码</span>
      </div>
      <button>登录</button>
      <p class="change"
         @click="change()">手机短信登录</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.register {
  font-size: 0.9rem;
  padding: 0rem 1.4rem;

  .phone {
    border-bottom: 0.07142857rem #e9ecf0 solid;
    margin-top: 1.785rem;
    input {
      padding: 0.5rem 0rem;
      margin-top: 0.3rem;
      width: 70%;
      border: 0px;
      outline: none;
    }
  }
  button {
    width: 100%;
    background: #ff734c;
    margin-top: 2.8rem;
    height: 3rem;
    color: white;
    border-radius: 100px;
    font-size: 1.2rem;
    border: 0px;
    outline: none;
  }
  .change {
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 2.14rem;
    color: #71797f;
  }
  .get {
    color: #71797f;
  }
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgb(195, 195, 195);
  }
}
</style>

<script>
export default {
  data () {
    return {
      msg: 1
    }

  },
  methods: {
    change () {
      if (this.msg == 1) {
        this.msg = 2
      } else {
        this.msg = 1
      }
    }
  }
}
</script>
